<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 当前分类
const currentCategory = ref(route.params.category || 'all');

// 电影分类列表
const categories = [
  { id: 'all', name: '全部电影', icon: '🎬' },
  { id: 'action', name: '动作', icon: '💥' },
  { id: 'comedy', name: '喜剧', icon: '😂' },
  { id: 'drama', name: '剧情', icon: '🎭' },
  { id: 'scifi', name: '科幻', icon: '🚀' },
  { id: 'horror', name: '恐怖', icon: '😱' },
  { id: 'romance', name: '爱情', icon: '❤️' },
  { id: 'thriller', name: '惊悚', icon: '🔪' }
];

// 排序选项
const sortOptions = [
  { id: 'hot', name: '热门' },
  { id: 'latest', name: '最新' },
  { id: 'score', name: '评分' }
];

// 当前排序
const currentSort = ref('hot');

// 模拟电影数据
const mockVideos = [
  {
    id: 1,
    title: '速度与激情10',
    cover: 'https://picsum.photos/id/22/320/180',
    director: '路易斯·莱特里尔',
    actors: '范·迪塞尔, 米歇尔·罗德里格兹',
    rating: '9.2',
    duration: '140分钟',
    releaseDate: '2023-05-19',
    category: 'action'
  },
  {
    id: 2,
    title: '奥本海默',
    cover: 'https://picsum.photos/id/23/320/180',
    director: '克里斯托弗·诺兰',
    actors: '基里安·墨菲, 艾米丽·布朗特',
    rating: '9.5',
    duration: '180分钟',
    releaseDate: '2023-07-21',
    category: 'drama'
  },
  {
    id: 3,
    title: '碟中谍7：致命清算（上）',
    cover: 'https://picsum.photos/id/24/320/180',
    director: '克里斯托弗·麦奎里',
    actors: '汤姆·克鲁斯, 海莉·阿特维尔',
    rating: '9.0',
    duration: '163分钟',
    releaseDate: '2023-07-12',
    category: 'action'
  },
  {
    id: 4,
    title: '芭比',
    cover: 'https://picsum.photos/id/25/320/180',
    director: '格蕾塔·葛韦格',
    actors: '玛格特·罗比, 瑞恩·高斯林',
    rating: '8.7',
    duration: '114分钟',
    releaseDate: '2023-07-21',
    category: 'comedy'
  },
  {
    id: 5,
    title: '沙丘2',
    cover: 'https://picsum.photos/id/26/320/180',
    director: '丹尼斯·维伦纽瓦',
    actors: '提莫西·查拉梅, 赞达亚',
    rating: '9.3',
    duration: '166分钟',
    releaseDate: '2024-03-01',
    category: 'scifi'
  },
  {
    id: 6,
    title: '招魂3',
    cover: 'https://picsum.photos/id/27/320/180',
    director: '迈克尔·查维斯',
    actors: '维拉·法米加, 帕特里克·威尔森',
    rating: '8.1',
    duration: '112分钟',
    releaseDate: '2021-06-04',
    category: 'horror'
  },
  {
    id: 7,
    title: '泰坦尼克号',
    cover: 'https://picsum.photos/id/28/320/180',
    director: '詹姆斯·卡梅隆',
    actors: '莱昂纳多·迪卡普里奥, 凯特·温丝莱特',
    rating: '9.7',
    duration: '194分钟',
    releaseDate: '1997-12-19',
    category: 'romance'
  },
  {
    id: 8,
    title: '盗梦空间',
    cover: 'https://picsum.photos/id/29/320/180',
    director: '克里斯托弗·诺兰',
    actors: '莱昂纳多·迪卡普里奥, 艾伦·佩姬',
    rating: '9.6',
    duration: '148分钟',
    releaseDate: '2010-07-16',
    category: 'scifi'
  },
  {
    id: 9,
    title: '致命ID',
    cover: 'https://picsum.photos/id/30/320/180',
    director: '詹姆斯·曼高德',
    actors: '约翰·库萨克, 雷·利奥塔',
    rating: '8.8',
    duration: '90分钟',
    releaseDate: '2003-04-25',
    category: 'thriller'
  },
  {
    id: 10,
    title: '让子弹飞',
    cover: 'https://picsum.photos/id/31/320/180',
    director: '姜文',
    actors: '姜文, 周润发, 葛优',
    rating: '9.0',
    duration: '132分钟',
    releaseDate: '2010-12-16',
    category: 'comedy'
  },
  {
    id: 11,
    title: '肖申克的救赎',
    cover: 'https://picsum.photos/id/32/320/180',
    director: '弗兰克·德拉邦特',
    actors: '蒂姆·罗宾斯, 摩根·弗里曼',
    rating: '9.9',
    duration: '142分钟',
    releaseDate: '1994-09-23',
    category: 'drama'
  },
  {
    id: 12,
    title: '寄生虫',
    cover: 'https://picsum.photos/id/33/320/180',
    director: '奉俊昊',
    actors: '宋康昊, 李善均, 赵汝贞',
    rating: '9.2',
    duration: '132分钟',
    releaseDate: '2019-05-21',
    category: 'drama'
  }
];

// 视频列表
const videos = ref([]);
// 加载状态
const isLoading = ref(false);

// 切换电影分类
const changeCategory = (categoryId) => {
  currentCategory.value = categoryId;
  currentSort.value = 'hot';
  // 更新URL
  router.push(`/category/${categoryId}`);
  // 加载电影
  loadVideos();
};

// 切换排序
const changeSort = (sortId) => {
  currentSort.value = sortId;
  loadVideos();
};

// 加载电影
const loadVideos = () => {
  isLoading.value = true;
  
  // 模拟加载延迟
  setTimeout(() => {
    let filteredVideos = [...mockVideos];
    
    // 按分类筛选
    if (currentCategory.value !== 'all') {
      filteredVideos = filteredVideos.filter(video => video.category === currentCategory.value);
    }
    
    // 按排序方式排序
    switch (currentSort.value) {
      case 'hot':
        // 按评分排序（最热门）
        filteredVideos.sort((a, b) => {
          const ratingA = parseFloat(a.rating);
          const ratingB = parseFloat(b.rating);
          return ratingB - ratingA;
        });
        break;
      case 'latest':
        // 按上映日期排序
        filteredVideos.sort((a, b) => new Date(b.releaseDate) - new Date(a.releaseDate));
        break;
      case 'score':
        // 按评分排序
        filteredVideos.sort((a, b) => {
          const ratingA = parseFloat(a.rating);
          const ratingB = parseFloat(b.rating);
          return ratingB - ratingA;
        });
        break;
    }
    
    videos.value = filteredVideos;
    isLoading.value = false;
  }, 500);
};

// 导航到电影详情
const goToVideo = (videoId) => {
  router.push(`/video/${videoId}`);
};

// 格式化电影评分
const formatRating = (rating) => {
  return rating + '分';
};

// 获取当前分类名称
const getCurrentCategoryName = () => {
  const category = categories.find(c => c.id === currentCategory.value);
  return category ? category.name : '全部';
};

onMounted(() => {
  // 监听路由变化
  if (route.params.category) {
    currentCategory.value = route.params.category;
  }
  loadVideos();
});
</script>

<template>
  <div class="category-container">
    <!-- 分类标题 -->
    <div class="category-header">
      <h1 class="category-title">{{ getCurrentCategoryName() }}</h1>
    </div>

    <!-- 分类导航 -->
    <div class="category-navigation">
      <div class="categories-scrollable">
        <div 
          v-for="category in categories" 
          :key="category.id"
          class="category-item"
          :class="{ active: currentCategory === category.id }"
          @click="changeCategory(category.id)"
        >
          <span class="category-icon">{{ category.icon }}</span>
          <span class="category-name">{{ category.name }}</span>
        </div>
      </div>
    </div>

    <!-- 排序选项 -->
    <div class="sort-options">
      <div 
        v-for="option in sortOptions" 
        :key="option.id"
        class="sort-item"
        :class="{ active: currentSort === option.id }"
        @click="changeSort(option.id)"
      >
        {{ option.name }}
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>

    <!-- 无结果状态 -->
    <div v-else-if="videos.length === 0" class="no-results">
      <div class="no-results-icon">🤔</div>
      <div class="no-results-text">该分类下暂无内容</div>
    </div>

    <!-- 电影网格 -->
    <div v-else class="videos-grid">
      <div 
        v-for="video in videos" 
        :key="video.id"
        class="video-card"
        @click="goToVideo(video.id)"
      >
        <div class="video-thumbnail">
          <img :src="video.cover" :alt="video.title" class="thumbnail-img" />
          <div class="video-duration">{{ video.duration }}</div>
          <div class="movie-rating">{{ formatRating(video.rating) }}</div>
        </div>
        <div class="video-info">
          <div class="video-title">{{ video.title }}</div>
          <div class="video-director">导演: {{ video.director }}</div>
          <div class="video-actors">{{ video.actors }}</div>
          <div class="video-stats">
            <span class="stat-item">{{ video.releaseDate }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.category-container {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

/* 分类标题 */
.category-header {
  margin: 32px 0 20px;
}

.category-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 分类导航 */
.category-navigation {
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
}

.categories-scrollable {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none; /* Firefox */
}

.categories-scrollable::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.category-item:hover {
  color: var(--primary-color);
}

.category-item.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 500;
}

.category-icon {
  font-size: 24px;
}

.category-name {
  font-size: 14px;
}

/* 排序选项 */
.sort-options {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.sort-item {
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 0;
  position: relative;
  transition: color 0.3s ease;
}

.sort-item:hover {
  color: var(--primary-color);
}

.sort-item.active {
  color: var(--primary-color);
  font-weight: 500;
}

.sort-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary-color);
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  gap: 16px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: var(--text-secondary);
  font-size: 16px;
}

/* 无结果状态 */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  gap: 16px;
}

.no-results-icon {
  font-size: 48px;
}

.no-results-text {
  color: var(--text-secondary);
  font-size: 16px;
}

/* 视频网格 */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.video-card {
  background-color: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.video-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 12px;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}

.video-director {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-actors {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-stats {
  display: flex;
  gap: 12px;
}

.stat-item {
  font-size: 13px;
  color: var(--text-light);
}

/* 电影评分 */
.movie-rating {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(255, 193, 7, 0.9);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .category-container {
    padding: 0 16px;
  }
  
  .category-title {
    font-size: 24px;
  }
  
  .videos-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }
  
  .categories-scrollable {
    gap: 12px;
  }
  
  .category-item {
    padding: 8px 12px;
  }
  
  .category-icon {
    font-size: 20px;
  }
  
  .category-name {
    font-size: 12px;
  }
  
  .sort-options {
    gap: 12px;
  }
  
  .sort-item {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .video-title {
    font-size: 14px;
  }
  
  .video-uploader {
    font-size: 13px;
  }
  
  .stat-item {
    font-size: 12px;
  }
  
  .category-header {
    margin: 20px 0 16px;
  }
}
</style>